<template>
  <card-layout title="风险统计" class="risk-statistics" bg="2">
    <template #extra>
      <el-button type="primary" size="small" @click="$emit('closeRisk',2)"><el-icon><SwitchButton /></el-icon>&nbsp; 关闭</el-button>
    </template>

    <div class="content-container">
      <!-- 图表区域 -->
      <div class="charts-container">
          <!-- 柱状图 -->
          <div class="chart-box">
            <div ref="barChartRef" class="chart"></div>
          </div>
       </div>
      
      <!-- 筛选区域 -->
      <div class="filter-container">
        <div class="filter-row">
          <el-select style="width: 120px" v-model="riskType" placeholder="预警种类" class="filter-item">
            <el-option label="全部预警" value="all"></el-option>
            <el-option label="gnss预警" value="gnss预警"></el-option>
            <el-option label="雷达预警" value="雷达预警"></el-option>
          </el-select>

          <el-select style="width: 100px" v-model="riskLevel" placeholder="预警等级" class="filter-item">
            <el-option label="全部" value="all"></el-option>
            <el-option label="红色预警" value="红色预警"></el-option>
            <el-option label="橙色预警" value="橙色预警"></el-option>
            <el-option label="黄色预警" value="黄色预警"></el-option>
            <el-option label="蓝色预警" value="蓝色预警"></el-option>
          </el-select>

          <el-input style="width: 120px" v-model="deviceName" placeholder="设备名称" class="filter-item"></el-input>
          
          <el-date-picker
            style="width: 220px"
            v-model="dateRange"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            class="date-range-picker"
          />
          
          <el-button type="success" @click="handleSearch" class="search-btn">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
        </div>
      </div>
      
      <!-- 表格区域 -->
      <div class="table-container">
        <el-table :data="tableData" :header-cell-style="headerCellStyle" style="width: 100%">
          <el-table-column prop="riskType" label="风险种类" width="150" align="center"></el-table-column>
          <el-table-column prop="riskLevel" label="风险等级" width="120" align="center">
            <template #default="{row}">
              <span :class="'risk-level-' + row.riskLevelKey">{{ row.riskLevel }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="riskName" label="风险类型" width="150" align="center"></el-table-column>
          <el-table-column prop="occurTime" label="发生时间" width="180" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default>
              <div class="operation-btns">
                <el-button type="primary" size="small" circle>
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button type="success" size="small" circle>
                  <el-icon><ChatDotRound /></el-icon>
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="100"
            :current-page="currentPage"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Search, Close, View, ChatDotRound } from '@element-plus/icons-vue';
import useChart from '@/hooks/useCharts';
import CardLayout from '@/layouts/CardLayout.vue';

// 筛选条件
const riskType = ref('all');
const riskLevel = ref('all');
const dateRange = ref([]);
const currentPage = ref(1);

// 图表引用
const barChartRef = ref(null);

// 使用 hooks 初始化图表
const { chartInstance: barChart } = useChart(barChartRef);

// 表格数据
const tableData = ref([
  {
    riskType: '卫星查看风险',
    riskName: '超界超采',
    riskLevel: '重大风险',
    riskLevelKey: 'red',
    occurTime: '2025-05-02 11:11:10'
  },
  {
    riskType: '卫星查看风险',
    riskName: '超界超采',
    riskLevel: '重大风险',
    riskLevelKey: 'red',
    occurTime: '2025-05-02 11:11:10'
  },
  {
    riskType: '卫星查看风险',
    riskName: '超界超采',
    riskLevel: '重大风险',
    riskLevelKey: 'red',
    occurTime: '2025-05-02 11:11:10'
  },
  {
    riskType: '无人机详查风险',
    riskName: '台阶坡面角超限',
    riskLevel: '较大风险',
    riskLevelKey: 'orange',
    occurTime: '2025-05-02 11:11:10'
  },
  {
    riskType: '无人机详查风险',
    riskName: '平盘宽度',
    riskLevel: '较大风险',
    riskLevelKey: 'orange',
    occurTime: '2025-05-02 11:11:10'
  },
  {
    riskType: '无人机详查风险',
    riskName: '台阶坡面角超限',
    riskLevel: '一般风险',
    riskLevelKey: 'yellow',
    occurTime: '2025-05-02 11:11:10'
  },
  {
    riskType: '无人机详查风险',
    riskName: '台阶高度',
    riskLevel: '低风险',
    riskLevelKey: 'blue',
    occurTime: '2025-05-02 11:11:10'
  }
]);

// 表格头部样式
const headerCellStyle = {
  background: '#0a2e5c',
  color: '#fff',
  fontWeight: 'bold',
  borderColor: '#164b87'
};

// 初始化柱状图
const initBarChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['重大风险', '较大风险', '一般风险', '低风险'],
      textStyle: {
        color: '#fff'
      },
      top: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月'],
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '重大风险',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#ff6b6b'
        },
        data: [100, 150, 230, 100]
      },
      {
        name: '较大风险',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#ff9f43'
        },
        data: [150, 100, 200, 140]
      },
      {
        name: '一般风险',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#feca57'
        },
        data: [116, 209, 109, 106]
      },
      {
        name: '低风险',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#54a0ff'
        },
        data: [211, 180, 230, 115]
      }
    ]
  };

  barChart.value.setOption(option);
};

// 搜索处理
const handleSearch = () => {
  console.log('搜索条件:', {
    riskType: riskType.value,
    riskLevel: riskLevel.value,
    startDate: dateRange.value ? dateRange.value[0] : '',
    endDate: dateRange.value ? dateRange.value[1] : ''
  });
  // 这里可以添加实际的搜索逻辑
};

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page;
  // 这里可以添加分页加载数据的逻辑
};

onMounted(() => {
  // 初始化图表
  initBarChart();
});
</script>

<style lang="scss" scoped>
.risk-statistics {
  box-sizing: border-box;
  min-width: 800px;
  color: #fff;
  
  .more-div {
    color: #bbcfff;
    cursor: pointer;
  }
  
  .more-div:active {
    scale: 0.8;
  }
  
  .content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0px;
    height: calc(100% - 44px);
    overflow: hidden;

    .charts-container {
      display: flex;
      height: 250px;
      gap: 16px;

      .chart-box {
        flex: 1;
        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }

    .filter-container {
      display: flex;
      flex-direction: column;
      // gap: 16px;
      // background-color: rgba(16, 65, 125, 0.3);
      // border: 1px solid rgba(31, 198, 255, 0.3);
      border-radius: 4px;
      padding: 8px;

      .filter-row {
        display: flex;
        align-items: center;
        gap: 0px;
        flex-wrap: wrap;
      }

      .filter-item {
        margin-right: 10px;
      }
      
      .date-range-picker {
        margin-right: 10px;
      }

      .search-btn {
        margin-left: 10px;
      }
    }

    .table-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      // background-color: rgba(16, 65, 125, 0.3);
      // border: 1px solid rgba(31, 198, 255, 0.3);
      border-radius: 4px;
      padding: 8px;
      overflow: hidden;

      .risk-level-red {
        color: #ff6b6b;
        font-weight: bold;
      }

      .risk-level-orange {
        color: #ff9f43;
        font-weight: bold;
      }

      .risk-level-yellow {
        color: #feca57;
        font-weight: bold;
      }

      .risk-level-blue {
        color: #54a0ff;
        font-weight: bold;
      }

      .operation-btns {
        display: flex;
        justify-content: center;
        gap: 8px;
      }

      .pagination {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
      }
    }
  }
}

:deep(.header) {
  background-position: left !important;
  background-size: contain !important;
}

// 覆盖 Element Plus 样式
:deep(.el-table) {
  height: 2rem;
  background-color: transparent;
  color: #fff;

  th.el-table__cell {
    background-color: #0a2e5c;
  }

  td.el-table__cell {
    background-color: rgba(16, 65, 125, 0.3);
    border-color: rgba(31, 198, 255, 0.3);
  }

  tr:hover > td.el-table__cell {
    background-color: rgba(22, 75, 135, 0.5) !important;
  }
}

:deep(.el-pagination) {
  --el-pagination-bg-color: rgba(16, 65, 125, 0.5);
  --el-pagination-text-color: #fff;
  --el-pagination-button-color: #fff;
  --el-pagination-hover-color: #409eff;
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(16, 65, 125, 0.3);
  box-shadow: 0 0 0 1px rgba(31, 198, 255, 0.3) inset;
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-select-dropdown__item) {
  color: #fff;
}

:deep(.el-select-dropdown) {
  background-color: #0a2e5c;
  border: 1px solid rgba(31, 198, 255, 0.3);
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(22, 75, 135, 0.5);
}

:deep(.el-date-editor) {
  --el-datepicker-border-color: rgba(31, 198, 255, 0.3);
  --el-datepicker-text-color: #fff;
  --el-datepicker-inner-border-color: rgba(31, 198, 255, 0.3);
  --el-datepicker-off-text-color: #888;
  --el-datepicker-header-text-color: #fff;
}
</style>